<template>
	<div>
		<div>ToDoList</div>
		<input type="text" name="" v-model="msg" /> <button @click="add"
			style="background-color: #42B983;color:#fff;outline: none;border-radius: 3px;">添加</button>
		<br>
		待完成的
		<ol>
			<li v-for="m  in unDoList">{{m.msg}}        <button @click="m.status =1">√</button> </li>
		</ol>
		<hr />
		 已完成的
		<ol>
			<li v-for="m in doneList">{{m.msg}} </li>
		</ol>

	</div>
</template>

<script>
	export default {
		name: 'ToDoList',
		data() {
			return {
				msg: '',
				//0 待完成的
				//1 已完成
				todolist: [{
						msg: '中午放学前一定要把vue-cli搞好，搞不好不吃饭',
						status: 1
					},
					{
						msg: '下次一定注意这个事儿',
						status: 0
					},
					{
						msg: '周四下班前写周报',
						status: 0
					}
				]
			}
		},
		methods:{
			add(){
				this.todolist.push({msg:this.msg,status: 0});
				this.msg = '';
			}
		},
		computed:{
			unDoList() {
				// todolist.map
				let undoList = [];
				for (var i = 0; i < this.todolist.length; i++) {
					if (this.todolist[i].status == 0) {
						undoList.push(this.todolist[i])
					}
				}
				return undoList;

			},
			doneList() {
				// todolist.map
				let doneList = [];
				for (var i = 0; i < this.todolist.length; i++) {
					if (this.todolist[i].status == 1) {
						doneList.push(this.todolist[i])
					}
				}
				return doneList;

			}
		}
	}
</script>

<style>
</style>
